<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div>
        <!-- 表格 -->
        <c-table ref="rootPowerTable" :api-interface="getRootPowerListApi" :open-page="false">
            <!-- 查询条件 -->
            <template v-slot:headerFormItem="">
                <a-form-item label="权限名称">
                    <a-input style="width: 300px;" type="text" autocomplete="off" v-decorator="[ 'name',{ initialValue : name } ]" />
                </a-form-item>
                <a-form-item label="权限标识">
                    <a-input style="width: 300px;"  type="text" autocomplete="off" v-decorator="[ 'permission',{ initialValue : permission } ]" />
                </a-form-item>
            </template>
            <!-- 操作按钮 -->
            <template v-slot:headerOperators="">
                <a-button icon="plus" type="primary" @click="clickAddPowerButton({ pid : '0' },'rootPowerTable')">新增</a-button>
            </template>
            <!-- 列 -->
            <template v-slot:columns="">
                <a-table-column title="编号" dataIndex="id" :align="'center'" />
                <a-table-column title="名称" dataIndex="name" :align="'center'" />
                <a-table-column title="类型" dataIndex="type" :align="'center'" >
                    <template slot-scope="record">
                        <a-tag v-if="record === 'page'" color="cyan">页面</a-tag>
                        <a-tag v-else color="blue">按钮</a-tag>
                    </template>
                </a-table-column>
                <a-table-column title="标识" dataIndex="permission" :align="'center'" />
                <a-table-column title="路径" dataIndex="path" :align="'center'" />
                <a-table-column title="创建时间" dataIndex="createTime" :align="'center'" />
                <a-table-column title="操作" :align="'center'">
                    <template slot-scope="record">
                        <a href="javascript:void(0);" v-if="record['type'] !== 'button'" @click="clickLookPowerDetailsButton(record)">详情</a>
                        <a-divider type="vertical" />
                        <a href="javascript:void(0);" @click="clickEditPowerButton(record)">修改</a>
                        <a-divider type="vertical" />
                        <a href="javascript:void(0);" @click="clickDeletePowerButton(record,'rootPowerTable')">删除</a>
                    </template>
                </a-table-column>
            </template>
        </c-table>
        <!-- 表单 -->
        <c-form-modal ref="powerFormModal">
            <template v-slot:formItem="">
                <a-form-item label="权限名称">
                    <a-input type="text"
                             autocomplete="off"
                             v-decorator="[ 'name',{ rules: [
                                { required: true, message: '请输入权限名称' },
                                { min:2, message:'长度为3-20个字符' },
                                { max:20, message:'长度为3-20个字符' },
                             ]} ]"
                    />
                </a-form-item>
                <a-form-item label="权限标识">
                    <a-input type="text"
                             autocomplete="off"
                             v-decorator="[ 'permission',{ rules: [
                                { required: true, message: '请输入权限标识' },
                                { min:2, message:'长度为3-50个字符' },
                                { max:50, message:'长度为3-50个字符' },
                             ]} ]"
                    />
                </a-form-item>
                <a-form-item label="父级Id">
                    <a-input type="text" autocomplete="off" disabled v-decorator="[ 'pid' ]" />
                </a-form-item>
                <a-form-item label="类型">
                    <a-radio-group :disabled="isDisabledTypeRadio"
                                   @change="changeTypeRadio"
                                   v-decorator="[ 'type',{ rules: [{ required: true, message: '请选择权限类型' }]}]" >
                        <a-radio value="page">页面</a-radio>
                        <a-radio value="button">按钮</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="页面路径" v-if="isShowPathInput">
                    <a-input type="text" autocomplete="off" v-decorator="[ 'path' ]" />
                </a-form-item>
            </template>
        </c-form-modal>
        <!-- 权限详情 -->
        <c-drawer ref="powerDetailsDrawer" title="权限详情">
            <a-descriptions layout="horizontal" :column="2">
                <a-descriptions-item label="编号" span="2">{{ selectedPower['id'] }}</a-descriptions-item>
                <a-descriptions-item label="名称">{{ selectedPower['name'] }}</a-descriptions-item>
                <a-descriptions-item label="类型">{{ selectedPower['type'] }}</a-descriptions-item>
                <a-descriptions-item label="标识">{{ selectedPower['permission'] }}</a-descriptions-item>
                <a-descriptions-item label="路径">{{ selectedPower['path'] }}</a-descriptions-item>
                <a-descriptions-item label="创建时间">{{ selectedPower['createTime'] }}</a-descriptions-item>
                <a-descriptions-item label="修改时间">{{ selectedPower['lastModifyTime'] }}</a-descriptions-item>
            </a-descriptions>
            <br />
            <!-- 表格 -->
            <c-table ref="subPowerTable" size="middle" :api-interface="getSubPowerListApi" :open-page="false" :open-search="false">
                <!-- 操作按钮 -->
                <template v-slot:headerOperators="">
                    <a-button icon="plus" type="primary"
                              @click="clickAddPowerButton({ pid : selectedPower['id'],type : 'button' },'subPowerTable')">新增</a-button>
                </template>
                <!-- 列 -->
                <template v-slot:columns="">
                    <a-table-column title="名称" dataIndex="name" :align="'center'" />
                    <a-table-column title="类型" dataIndex="type" :align="'center'" >
                        <template slot-scope="record">
                            <a-tag v-if="record" color="blue">按钮</a-tag>
                        </template>
                    </a-table-column>
                    <a-table-column title="标识" dataIndex="permission" :align="'center'" />
                    <a-table-column title="操作" :align="'center'">
                        <template slot-scope="record">
                            <a href="javascript:void(0);" @click="clickEditPowerButton(record)">修改</a>
                            <a-divider type="vertical" />
                            <a href="javascript:void(0);" @click="clickDeletePowerButton(record,'subPowerTable')">删除</a>
                        </template>
                    </a-table-column>
                </template>
            </c-table>
        </c-drawer>
    </div>
</template>

<script>
    import { getPowerList,deletePower,editPower,addPower } from '@/apis/upms';
    import CTable from '@/components/table/CTable';
    import CFormModal from '@/components/form/CFormModal';
    import CDrawer from '@/components/drawer/CDrawer';
    export default {
        components : {
            CTable,
            CFormModal,
            CDrawer
        },
        props : {
            name : { type : String,default : '' },
            permission : { type : String,default : '' },
        },
        data(){
            return {
                //  禁用类型Radio
                isDisabledTypeRadio : false,
                //  隐藏页面路径Input
                isShowPathInput : true,
                //  选中的权限
                selectedPower : {}
            };
        },
        methods : {
            //  获取顶级权限列表
            getRootPowerListApi : function(params){
                params['pid'] = '0';
                return getPowerList(params);
            },
            //  查询子权限列表
            getSubPowerListApi : function(){
                const params = {};
                params['pid'] = this.selectedPower['id'];
                return getPowerList(params);
            },
            //  点击添加权限按钮
            clickAddPowerButton : function (params,tableRef) {
                let $this = this;
                //  打开弹窗
                $this.$refs['powerFormModal'].open({
                    title : '添加权限',
                    apiInterface : addPower,
                    callbackFn : () => $this.$refs[tableRef].getDataList(),
                    data : params
                });
                //  是否禁用
                $this.isDisabledTypeRadio = params['type'] !== undefined;
                $this.isShowPathInput = this.isDisabledTypeRadio && params['type'] === 'page';
            },
            //  点击查看权限详情按钮
            clickLookPowerDetailsButton : function (params) {
                let $this = this;
                $this.selectedPower = { ...params };
                $this.$refs['powerDetailsDrawer'].open();
                //  查询数据
                $this.$nextTick(() => $this.$refs['subPowerTable'].getDataList());
            },
            //  监听Radio的值发生更改
            changeTypeRadio : function (e) {
                this.isShowPathInput = e.target.value === 'page';
            },
            //  点击删除权限按钮
            clickDeletePowerButton : function (params,tableRef) {
                let $this = this;
                $this.$modal.confirm({
                    title : '删除权限',
                    content : '确认删除【' + params['name'] + '】',
                    onOk : () => deletePower(params['id']).then(() => {
                        $this.$refs[tableRef].deleteDataItem(params);
                        $this.$message.success("删除成功");
                    })
                });
            },
            //  点击修改权限按钮
            clickEditPowerButton : function (params) {
                let $this = this;
                //  打开弹窗
                $this.$refs['powerFormModal'].open({
                    title : '修改权限',
                    apiInterface : editPower,
                    callbackFn : (data) => {
                        Object.assign(params,data);
                        $this.$message.success("保存成功");
                    },
                    data : params
                });
                //  是否禁用
                $this.isDisabledTypeRadio = true;
                $this.isShowPathInput = params['type'] === 'page';
            }
        }
    }
</script>
